<template>
    <div>
      <el-form :inline="true" :model="selectFrom" class="demo-form-inline">
        <el-form-item label="部门名称">
          <el-input v-model="selectFrom.deptName" placeholder="部门名称"></el-input>
        </el-form-item>
        <el-form-item label="部门状态">
          <el-select v-model="selectFrom.status" placeholder="部门状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>

      <el-button type="text" @click="saveDept">新增</el-button>
      <el-button type="text" @click="exportFactory">报 表</el-button>
      <el-button @click="CountSysDept">数据统计</el-button>

      <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="deptId"
          border
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
            prop="deptName"
            label="部门名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="orderNum"
            label="显示顺序"
            width="180">
        </el-table-column>
        <el-table-column
            prop="status"
            label="部门状态"
            width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==0">正常</el-tag>
            <el-tag type="danger" v-if="scope.row.status==1">停用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="120">
          <template slot-scope="scope">
            <el-button @click="updateDept(scope.row)" type="text" size="small">修改</el-button>
            <el-button type="text" size="small" @click="deleteDept(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <!--    部门新增-->
        <el-dialog title="部门新增" :visible.sync="SaveFormVisible" width="600px" append-to-body>
          <el-form ref="form" :model="form" rules="rules" label-width="80px">
          <el-row>
<!--            <el-col :span="24" v-if="form.parentId !== 0">-->
<!--              <el-form-item label="上级部门" prop="parentId">-->
<!--                <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="12">
              <el-form-item label="上级部门" prop="deptName">
                <el-input v-model="form.parentId" placeholder="请输入上级部门" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="部门名称" prop="deptName">
                <el-input v-model="form.deptName" placeholder="请输入部门名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="显示排序" prop="orderNum">
                <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
              </el-form-item>
            </el-col>
          </el-row>
            <el-row>
            <el-col :span="12">
              <el-form-item label="负责人" prop="deptName">
                <el-input v-model="form.leader" placeholder="请输入负责人" />
              </el-form-item>
            </el-col>
              <el-col :span="12">
              <el-form-item label="联系电话" prop="deptName">
                <el-input v-model="form.phone" placeholder="请输入联系电话" />
              </el-form-item>
            </el-col>
          </el-row>
            <el-row>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="deptName">
                <el-input v-model="form.email" placeholder="请输入邮箱" />
              </el-form-item>
            </el-col>
              <el-col :span="12">
                <el-form-item label="部门状态" :label-width="formLabelWidth">
                  <el-radio v-model="form.status" label="0">正常</el-radio>
                  <el-radio v-model="form.status" label="1">停用</el-radio>
                </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="SaveFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="SaveSure">确 定</el-button>
        </div>
      </el-dialog>

      <!--    部门修改&详情-->
      <el-dialog title="部门修改" :visible.sync="UdateFormVisible" width="600px" append-to-body>
        <el-form ref="form" :model="form" rules="rules" label-width="80px">
          <el-row>
<!--            <el-col :span="24" v-if="form.parentId !== 0">-->
<!--              <el-form-item label="上级部门" prop="parentId">-->
<!--                <treeselect v-model="form.parentId" :options="deptOptions" placeholder="选择上级部门" />-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col :span="12">
              <el-form-item label="上级部门" prop="deptName">
                <el-input v-model="form.parentId" placeholder="请输入上级部门" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="部门名称" prop="deptName">
                <el-input v-model="form.deptName" placeholder="请输入部门名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="显示排序" prop="orderNum">
                <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="负责人" prop="deptName">
                <el-input v-model="form.leader" placeholder="请输入负责人" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="deptName">
                <el-input v-model="form.phone" placeholder="请输入联系电话" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="邮箱" prop="deptName">
                <el-input v-model="form.email" placeholder="请输入邮箱" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="部门状态" :label-width="formLabelWidth">
                <el-radio v-model="form.status" label="0">正常</el-radio>
                <el-radio v-model="form.status" label="1">停用</el-radio>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="UdateFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="UpdateSure">确 定</el-button>
        </div>
      </el-dialog>


    </div>

</template>

<script>
export default {
  name: "DeptView",
  data(){
    return{
      tableData:[],
      selectFrom:{
        deptId:null,
        parentId: null,
        ancestors:null,
        deptName: null,
        orderNum: null,
        leader: null,
        phone: null,
        email: null,
        status: null,

      },
      SaveFormVisible:false,
      UdateFormVisible:false,
      form:{

      },
      updateFrom:{

      },
      deptOptions:[]
    }
  },
  methods:{
    //数据统计
    CountSysDept(){
      this.$router.push("/count")
    },
    //修改方法
    UpdateSure(){
        this.axios.post("sysDept/update",this.form).then(resp=>{
          console.log(resp)
          this.getlist()
          this.UdateFormVisible=false
        })
    },
    //添加方法
    SaveSure(){
      this.axios.post("sysDept/save",this.form).then(resp=>{
        this.getlist()
        this.SaveFormVisible=false
      })

    },
    //逻辑删除
    deleteDept(row){

        this.axios.post("sysDept/remove?id=+"+row.deptId).then(resp=>{
          this.getlist()
        })
    },
    //修改回显
    updateDept(row){
      this.axios.post("sysDept/updateSysDept?id="+row.deptId).then(resp=>{
        //数据赋值
        this.form = {
          deptId:row.deptId,
          parentId:row.parentId,
          deptName:row.deptName,
          orderNum:row.orderNum,
          leader:row.leader,
          phone:row.phone,
          email:row.email,
          status:row.status,

        }
        this.UdateFormVisible=true
      })
    },
    //数据查询
    onSubmit(){
      this.getlist()
    },
    //添加弹出框
    saveDept(){
      this.SaveFormVisible=true
    },
    //列表查询
    getlist(){
      this.axios.post("sysDept/list",this.selectFrom).then(resp=>{

        this.tableData = resp.data.data
      })
    },
    //Excel数据报表导出
    exportFactory(){
      this.axios.post("sysDept/export",this.selectFrom).then(resp=>{
        console.log(resp);
        const content = resp
        const blob = new Blob([content],{type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
        //导出文件名称
        const fileName = "部门.xlsx"
        if ('download' in document.createElement('a')){
          //非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          //释放URL对象
          URL.revokeObjectURL(elink.href)
          document.body.removeChild(elink)
        } else {
          //IE10+下载
          navigator.msSaveBlob(blob,fileName)
        }
      })
    }
  },
  created() {
    this.getlist();
  }
}
</script>

<style scoped>

</style>